<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>下载</button>
		<img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=690333b267224f4a43947b41689efb37/d52a2834349b033b804db94e1fce36d3d439bd59.jpg"/>
		<a href="https://chess-record-test.obs.cn-north-1.myhuaweicloud.com/b54ab9a5fc9c24ce6c4d1d856291b750" download="logo.png">下载图片</a>
	</body>
	<script src="js/esdk-obs-browserjs-without-polyfill-3.1.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		// 创建ObsClient实例
		var obsClient = new ObsClient({
			access_key_id: 'CJTRUPEZBC2RVGFBAB6T',
			secret_access_key: 'hodhHpjMIIDhl6KXbpDB35bzjLFG5KisKATnigcE',
			server: 'obs.cn-north-1.myhuaweicloud.com'
		});

		obsClient.getObject({
			Bucket: 'chess-record-test',
			Key: 'b54ab9a5fc9c24ce6c4d1d856291b750',
			SaveByType: 'file'
		}, function(err, result) {
			if(err) {
				console.error('Error-->' + err);
			} else {
				console.log('Status-->' + result.CommonMsg.Status);
				if(result.CommonMsg.Status < 300 && result.InterfaceResult) {
					// 获取下载对象的路径
					console.log('Download Path:');
					console.log(result.InterfaceResult.Content.SignedUrl);
				}
			}
		});
		function downloadIamge(imgsrc, name) { //下载图片地址和图片名
			var img_type = "";
			img_type = imgsrc.substring(str.length-3);
			let image = new Image();
			// 解决跨域 Canvas 污染问题
			image.setAttribute("crossOrigin", "anonymous");
			image.onload = function() {
				let canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				let context = canvas.getContext("2d");
				context.drawImage(image, 0, 0, image.width, image.height);
				let url = canvas.toDataURL("image/jpeg"); //得到图片的base64编码数据
				console.log(url);
				let a = document.createElement("a"); // 生成一个a元素
				let event = new MouseEvent("click"); // 创建一个单击事件
				a.download = name || "photo"; // 设置图片名称
				a.href = url; // 将生成的URL设置为a.href属性
				a.dispatchEvent(event); // 触发a的单击事件
			};
			image.src = imgsrc;
		}
		$("button").click(function() {
			downloadIamge("https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=690333b267224f4a43947b41689efb37/d52a2834349b033b804db94e1fce36d3d439bd59.jpg", "heiehi");
		})
	</script>
</html>